<script lang="ts">
  import { goto } from "$app/navigation";
  import { logout } from "$lib/api/admin_auth";
  import { userStore } from "$lib/stores/user.svelte";

  import { Accordion } from "@skeletonlabs/skeleton-svelte";
  import { LayoutTemplate, Users } from "lucide-svelte";
  import { getContext } from "svelte";
  import type { Store as ToastStore } from "@zag-js/toast";
  import { page } from "$app/state";
  import { ADMIN_CONFIG_AI_PROVIDER_PATH } from "$lib/utils/consts";

  const toast: ToastStore = getContext("toast");

  let curTab = $state(["user"]);

  async function doLogout() {
    await logout();
    userStore.adminUserName = "";
    userStore.adminUserSession = "";
    goto("/");
    toast.create({
      title: "成功",
      description: "退出管理后台!",
      type: "success",
    });
  }
</script>

<div>
  <header>
    <h3 class="h3 text-center mb-2">管理后台</h3>
    <div class="flex justify-end pr-2 space-x-2 pb-[4px]">
      <h5 class="h5">{userStore.adminUserName}</h5>
      <button type="button" class="chip preset-tonal" onclick={() => doLogout()}
        >退出</button
      >
    </div>
    <hr class="hr" />
  </header>
  <div class="h-[calc(100vh-130px)] overflow-y-auto mt-2">
    <Accordion value={curTab} onValueChange={(value) => (curTab = value.value)}>
      <Accordion.Item value="user" panelClasses="ring-0">
        {#snippet lead()}<Users size={24} />{/snippet}
        {#snippet control()}用户管理{/snippet}
        {#snippet panel()}TODO{/snippet}
      </Accordion.Item>
      <Accordion.Item value="config" panelClasses="ring-0">
        {#snippet lead()}<LayoutTemplate size={24} />{/snippet}
        {#snippet control()}配置管理{/snippet}
        {#snippet panel()}
          <ul>
            <li
              role="none"
              class="pl-[40px] p-1 rounded-[10px] hover:preset-filled-primary-50-950 {page.url
                .pathname == ADMIN_CONFIG_AI_PROVIDER_PATH
                ? 'preset-filled-primary-50-950'
                : ''}"
              onclick={() => goto(ADMIN_CONFIG_AI_PROVIDER_PATH)}
            >
              Llm供应商
            </li>
          </ul>
        {/snippet}
      </Accordion.Item>
    </Accordion>
  </div>
</div>
